import WidgetEntry from "./WidgetEntry";
import widgetMap from "./widgetMap";
import "./widget.less";

export default {
  name: "WidgetTree",
  components: {
    WidgetEntry,
  },

  props: {
    widgets: [],
    values: {},
    valueCallback: null,
  },

  data() {
    return {};
  },

  methods: {
    xxx() {
      console.log("xxxxx");
    },

    renderWidget(widgets = []) {
      return widgets.map((widget) => {
        const tagName = widget.tagName;
        const hanTagName = widgetMap[tagName];

        if (!hanTagName) {
          return (
            <van-row class="widget_unavailable" type="flex" align="center">
              <van-icon name="fail" />
              <span>不支持的组件</span>
            </van-row>
          );
        }

        if (widget.__config?.type === "formItem") {
          // TODO
          // 这里并不需要多嵌套一层HanFormItem
          // 因为vant的form不包含formItem
          return (
            <WidgetEntry tag="HanFormItem" key={widget.key + "_HanFormItem"}>
              <WidgetEntry
                tag={hanTagName}
                key={widget.key}
                instance={widget}
                values={this.values}
                valueCallback={this.valueCallback}
              >
                {widget.children?.length > 0
                  ? this.renderWidget(widget.children)
                  : null}
              </WidgetEntry>
            </WidgetEntry>
          );
        } else if (tagName === "hlLayout") {
          return (
            <WidgetEntry tag={hanTagName} key={widget.key} instance={widget}>
              {widget.children?.length > 0
                ? widget.children.map((subWidget, subIndex) => {
                    return (
                      <WidgetEntry
                        tag="HanCol"
                        key={widget.key + "_HanCol_" + subIndex}
                        instance={subWidget}
                        // trigger={this.trigger}
                      >
                        {subWidget.children?.length > 0
                          ? this.renderWidget(subWidget.children)
                          : null}
                      </WidgetEntry>
                    );
                  })
                : null}
            </WidgetEntry>
          );
        } else if (tagName === "hlLayoutTab") {
          return (
            <WidgetEntry tag={hanTagName} key={widget.key} instance={widget}>
              {widget.children?.length > 0
                ? widget.children.map((subWidget, subIndex) => {
                    return (
                      <WidgetEntry
                        tag="HanTabItem"
                        key={widget.key + "_HanTabItem_" + subIndex}
                        instance={subWidget}
                        // trigger={this.trigger}
                      >
                        {subWidget.children?.length > 0
                          ? this.renderWidget(subWidget.children)
                          : null}
                      </WidgetEntry>
                    );
                  })
                : null}
            </WidgetEntry>
          );
        } else {
          return (
            <WidgetEntry
              tag={hanTagName}
              key={widget.key}
              instance={widget}
              // values={this.values}
              // trigger={this.trigger}
            >
              {widget.children?.length > 0
                ? this.renderWidget(widget.children)
                : null}
            </WidgetEntry>
          );
        }
      });
    },
  },

  render() {
    const widgrtTree = this.renderWidget(this.widgets);
    return <div>{widgrtTree}</div>;
  },
};
